<div>
    <!-- widget content -->
    <div class="widget-body">

        <form action="" method="post" id="checkout-form" class="smart-form">
            <header>
                <h2>
                    新增用户
                    <button class="close"  data-dismiss="modal">
                        x
                    </button>
                </h2>

            </header>
            <fieldset>
            	<div id="dialog-alert">
            	</div>
                <div class="row">
                    <label class="label col col-2"><label style="color:red">*</label>登录用户名</label>
                    <section class="col col-4">
                        <label class="input">
                            <input type="text" id="username" name="username" placeholder=" 请输入用户名" class="required ">
                        </label>
                    </section>
                    <label class="label col col-2"><label style="color:red">*</label>登录密码</label>
                    <section class="col col-4">
                        <label class="input">
                            <input type="password" id="password" name="password" placeholder="请输入密码" class="required ">
                        </label>
                    </section>
                </div>
                <div class="row">
                    <label class="label col col-2"><label style="color:red">*</label>显示名称</label>
                    <section class="col col-4">
                        <label class="input">
                            <input type="text" id="name" name="name" placeholder=" 请输入显示名" class="required ">
                        </label>
                    </section>
                    <label class="label col col-2"><label style="color:red">*</label>电话</label>
                    <section class="col col-4">
                        <label class="input">
                            <input type="text" id="telephone" name="telephone" placeholder=" 请输入电话" class="required ">
                        </label>
                    </section>
                </div>
                <div class="row">
                    <label class="label col col-2"><label style="color:red">*</label>email</label>
                    <section class="col col-4">
                        <label class="input">
                            <input type="text" id="email" name="email" email=" 请输入邮件地址" class="required ">
                        </label>
                    </section>
                </div>
            </fieldset>
        </form>


    </div>
    <!-- end widget content -->

</div>
<div class="modal-footer">

    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
        取消
    </button>
    <button type="submit" class="btn btn-primary btn-sm" id="submitbtn">
        保存
    </button>
</div>
<script>
    pageSetUp();
    var pagefunction = function() {
        var errorClass = 'invalid';
        var errorElement = 'em';
        var option = {
            errorClass: errorClass,
            errorElement:errorElement,
            highlight: function(element) {
                $(element).parent().removeClass('state-success').addClass("state-error");
                $(element).removeClass('valid');
            },
            unhighlight: function(element) {
                $(element).parent().removeClass("state-error").addClass('state-success');
                $(element).addClass('valid');

            },
            // Rules for form validation
            // Messages for form validation
            messages:{
            	username : {
                    required : '请输入登录用户名'
                },
                password : {
                    required : '请输入用户密码'
                },
                name : {
                    required : '请输入显示名称'
                },
                telephone : {
                    required : '请输入电话号码'
                },
                email : {
                    required : '请输入邮件地址'
                }
            },
            errorPlacement : function(error, element) {
                if($(element).next("div").hasClass("tooltip")) {
                    $(element).attr("data-original-title", $(error).text()).tooltip("show");
                } else {
                    $(element).attr("title",
                            $(error).text()).tooltip("show");
                }
            },
            submitHandler:function(form){
            	//在这里生成需要提交的json数据
            	var data=$('#checkout-form').serializeArray();
            	sendPost("/upm_manager/v1.0/users/register", postSuccess, DialogAlert,JSON.stringify(arrayToJson(data)),null);
            }
        };
        $('#checkout-form').validate(option);
    };
    loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);
    function postSuccess(data){
    	$("#addModal").modal('toggle');
    	sendGet("/upm_manager/v1.0/users",reloadGrid,ListAlert,null);
    }
    $('#submitbtn').click(function() {
    	DialogAlertClear();
    	$('#checkout-form').submit();
    });
</script>